<script setup lang="ts">
import indexOne from "@/components/home/index-one.vue";
import indexTwo from "@/components/home/index-two.vue";
import indexThree from "@/components/home/index-three.vue";
import indexFour from "@/components/home/index-four.vue";
import indexFive from "@/components/home/index-five.vue";
const swiperList: Component[] = [
  indexOne,
  indexTwo,
  indexThree,
  indexFour,
  indexFive,
];

const defalutHeight = ref(0);
const windowHeight = ref(0);
/* 监听窗口大小变化 */
const resizeWindowHeight = () => {
  windowHeight.value = window.innerHeight;
};
onMounted(() => {
  // 获取窗口的可视区域高度
  windowHeight.value = window.innerHeight;
  defalutHeight.value = window.innerHeight;
  // 监听窗口大小变化以更新高度
  window.addEventListener("resize", resizeWindowHeight);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeWindowHeight);
});

let swiperIndex = ref(0);
const slideChange = (slide: any) => {
  console.log(slide.activeIndex);
  swiperIndex.value = slide.activeIndex;
  appStore().swiperIndex = slide.activeIndex;
};
</script>

<template>
  <div class="website">
    <Swiper
      :direction="'vertical'"
      :style="{ height: windowHeight - 88 + 'px' }"
      :mousewheel="true"
      :pagination="{
        clickable: true,
        el: '.web-pagination',
      }"
      :navigation="{
        nextEl: '.arrow-icon',
      }"
      @slideChange="slideChange"
      :modules="[SwiperPagination, SwiperMousewheel, SwiperNavigation]"
    >
      <SwiperSlide v-for="(item, index) in swiperList" :key="index">
        <component
          :defalutHeight="defalutHeight"
          :windowHeight="windowHeight"
          :is="item"
        />
      </SwiperSlide>
      <div :class="'web-pagination web-pagination' + swiperIndex"></div>
    </Swiper>
    <img v-show="swiperIndex != swiperList.length-1" class="arrow-icon" src="/images/index/arrow.png" alt="" />
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1800px) {
  .swiper .web-pagination.web-pagination0 {
    display: none;
  }
}
.website,
.swiper {
  height: calc(100vh - 88px);
}
.swiper {
  width: 100%;
  .web-pagination {
    text-align: center;
    transition: 300ms opacity;
    position: absolute;
    right: 182px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    :deep(.swiper-pagination-bullet) {
      cursor: pointer;
      width: 20px;
      height: 3px;
      background: #ffffff;
      border: 1px solid #ffffff;
      opacity: 0.49700000000000005;
      margin-bottom: 15px;
      transition: width 0.3s ease;
      border-radius: 0;
      margin-left: auto;
      &.swiper-pagination-bullet-active {
        transition: width 0.3s ease;
        width: 40px;
        opacity: 1;
      }
    }
  }
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .swiper-wrapper {
    min-width: 100vh;
    width: 100vh;
  }
}
.arrow-icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 3;
  -webkit-animation: bounce-down 2s linear infinite;
  animation: bounce-down 2s linear infinite;
}

@-webkit-keyframes bounce-down {
  25% {
    -webkit-transform: translateY(-0.3vw);
  }
  50%,
  100% {
    -webkit-transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(0.3vw);
  }
}
@keyframes bounce-down {
  25% {
    transform: translateY(-0.3vw);
  }
  50%,
  100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(0.3vw);
  }
}
</style>
